<!-- 页面标注 -->
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=e1055c36e70588515b90f03a62e02c09" type="text/javascript"></script> -->
	<title>主体标注</title>
	<link rel="stylesheet" href="styles/showPoint.css">
	<link rel="stylesheet" href="./js/leaflet/leaflet.css">
	<script type="text/javascript" src="./js/leaflet/leaflet.js"></script>
</head>

<body onload="initMap()">
	<div class="point" onclick="getCurrentPoint()">
		<img src="img/point4.png" style="width: 40px;height: 40px;" />
	</div>
	<div class="bottom-content">
		<div class="point-item">
			<img src="img/point4.png" class="point-icon" />
			<span class="point-text">点击重新获取当前设备位置</span>
		</div>
		<div class="point-item">
			<img src="img/yuandian.png" class="point-icon" />
			<span class="point-text">当前设备GPS坐标位置</span>
		</div>
		<div class="point-item">
			<img src="img/point.png" class="point-icon" style="width: 16px;margin-left: 5px;" />
			<span class="point-text" style="margin-left: 10px;">企业坐标位置</span>
		</div>
	</div>
	<div style="position: absolute;z-index:2" id="map"></div>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/uni.webview.1.5.6.js"></script>
<script type="text/javascript" src="./js/map-util.js"></script>
<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> -->
<script type="text/javascript">
	// var vConsole = new window.VConsole(); 
	var keurealy = false;
	var map = null; // 地图实例
	var pageReady = false; //map加载状态
	var currentMarker = null; // 当前位置标记
	var companyMarker = null; // 企业位置标记


	var int = null;
	document.addEventListener('UniAppJSBridgeReady', function () {
		console.log('UniAppJSBridgeReady环境已准备完成：');
		int = setInterval(function () {
			//页面完成,获取当前位置  
			if (pageReady && keurealy) {
				clearInterval(int);
				getCurrentPoint();
			}
		}, 500)
	});

	//初始化地图
	function initMap() {
		//获取参数
		var params = getUrlParams();
		var lng = params.lng;
		var lat = params.lat;

		setTimeout(function () {
			// 初始化Leaflet地图
			map = L.map('map');

			// 添加高德地图瓦片图层
			L.tileLayer('https://wprd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}', {
				subdomains: ['1', '2', '3', '4'],
				attribution: '&copy; 高德地图'
			}).addTo(map);

			if (lng != null && lng != '' && lng != 'undefined' && lat != null && lat != 'undefined' && lat != '') {
				lng = parseFloat(lng);
				lat = parseFloat(lat);

				// 将WGS84坐标转换为GCJ02坐标（高德地图使用的坐标系）
				var gcj02 = wgs84togcj02(lng, lat);

				//企业当前定位
				map.setView([gcj02.lat, gcj02.lng], 12);

				//创建企业位置标注
				var companyIcon = L.icon({
					iconUrl: "img/point.png",
					iconSize: [19, 27],
					iconAnchor: [10, 25]
				});

				companyMarker = L.marker([gcj02.lat, gcj02.lng], { icon: companyIcon }).addTo(map);
			} else {
				map.setView([39.908, 116.397], 12); // 默认位置，北京
			}

			pageReady = true;
		}, 500);
	}

	function getCurrentPoint() {
		uni.postMessage({
			data: { type: 'getCurrentPoint' }
		})
	}

	function currentPointCallback(lngLat) {
		var lngLatArr = lngLat.split(",");
		var lng = parseFloat(lngLatArr[0]);
		var lat = parseFloat(lngLatArr[1]);

		// 将WGS84坐标转换为GCJ02坐标（高德地图使用的坐标系）
		var gcj02 = wgs84togcj02(lng, lat);

		// 如果已有当前位置标记则移除
		if (currentMarker) {
			map.removeLayer(currentMarker);
		}

		//创建当前位置标注对象
		var currentIcon = L.icon({
			iconUrl: "img/yuandian.png",
			iconSize: [19, 19],
			iconAnchor: [10, 10]
		});

		// 添加新的位置标记（使用转换后的坐标）
		currentMarker = L.marker([gcj02.lat, gcj02.lng], { icon: currentIcon }).addTo(map);

		//移动到这个位置 
		map.panTo([gcj02.lat, gcj02.lng]);
	}

	//获取链接参数
	function getUrlParams() {
		var url = window.location.href;
		var params = url.split('?')[1];
		var paramsObj = {};

		if (params) {
			var paramArray = params.split('&');
			paramArray.forEach(function (param) {
				var paramSplit = param.split('=');
				paramsObj[paramSplit[0]] = paramSplit[1];
			});
		}
		return paramsObj;
	}

	function bacPage() {
		console.log('返回')
		uni.postMessage({
			data: { type: 'back' }
		})
	}
</script>

</html>